<template>
  <div>
    <tab :tabs="[{name: 'msg', text: '系统消息'}]" activeName="msg"></tab>
    <div class="select-box">
      <el-select v-model="activeName" placeholder="请选择" size="mini" @change="handleTabClick">
        <el-option
          v-for="item in tablist"
          :key="item.name"
          :label="item.text"
          :value="item.name">
        </el-option>
      </el-select>
    </div>
    <ul class="message_cont">
      <li class="message_li" v-for="(mesItem, mesIndex) in systemMesList" :key="mesIndex" :name="mesItem.id" @click="readMsg(mesItem.id)">
        <div class="message_title">
          <span v-show="!mesItem.status" class="message_dot"></span><span>{{mesItem.title}}</span><span class="message_time">{{mesItem.sendTime}}</span>
        </div>
        <div class="message_content">{{mesItem.content}}</div>
      </li>
      <div class="no-content" v-show="systemMesList.length === 0">
        <!-- <img src="../../../images/no_data.png" alt=""> -->
        还没有消息哦~
      </div>
    </ul>
    <!-- 分页 -->
    <el-row v-if="pageObj && pageObj.totalPages > 1">
      <el-pagination class="page_box"  layout="total, prev, pager, next, ->"  :total="pageObj.totalRecords" :page-size="pageObj.pageSize" @current-change="handlePage" ></el-pagination>
    </el-row>
  </div>
</template>
<script>
  import {systemMes, updateMes} from '@/service/get-data'
  import {Tabs, TabPane, Collapse, CollapseItem, Row, Pagination, Select, Option} from 'element-ui'
  import {tab} from '@/components/index'
  export default{
    components: {
      elTabs: Tabs,
      elTabPane: TabPane,
      elCollapse: Collapse,
      elCollapseItem: CollapseItem,
      elRow: Row,
      elPagination: Pagination,
      tab,
      elSelect: Select,
      elOption: Option

    },
    data () {
      return {
        tablist: [{name: 'all', text: '全部消息'}, {name: 'noRead', text: '未读消息'}, {name: 'read', text: '已读消息'}],
        activeName: 'all',
        collapseName: 'm001',
        status: null, // 阅读状态
        systemMesList: [],
        page: 1, // 当前页码
        pageObj: {} // 页码数据
      }
    },
    methods: {
      readMsg (id) {
        this.$router.push({name: 'detailMsg', query: {id: id}})
      },
      async fetchSystemList () {
        let loading = this.$loading({target: '.message_cont'})
        let res = await systemMes(this.page, 100, this.status)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.systemMesList = res.data.list
          this.pageObj = res.data.page
          loading.close()
        } else {
          this.$message({
            message: res.resultMsg,
            type: 'wraming'
          })
        }
      },
      handlePage (page) {
        this.page = page
        this.fetchSystemList()
      },
      // 切换阅读状态
      handleTabClick (tab) {
        switch (tab) {
          case 'all': this.status = null
            break
          case 'read': this.status = true
            break
          case 'noRead': this.status = false
            break
          default: this.status = null
        } // false 是未读,true 已读
        this.fetchSystemList()
      },
      // 手风琴切换
      async handleCollapse (id) {
        let res = await updateMes(id)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          this.$store.commit('MESSAGENUM', res.data.messageNumber)
        }
      }
    },
    mounted () {
      this.fetchSystemList()
    }
  }
</script>
<style lang="scss" scoped>
  .select-box{
    width: 117px;
    position: absolute;
    right: 80px;
    top: 30px;
  }
  .message_cont{
    position: relative;
    // margin-top: 20px;
    // border: 1px solid #ECECEC;
    .message_li{
      height: 108px;
      box-sizing: border-box;
      padding: 30px 100px 30px 40px;
      border: 1px solid #ECECEC;
      border-top: none;
      cursor: pointer;
      &:first-of-type{
        border-top: 1px solid #ECECEC;
      }
      .message_title{
        font-size: 18px;
        margin-bottom: 7px;
        position: relative;
        .message_dot{
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 6px;
          background-color: #FF0000;
          position: absolute;
          left: -18px;
          top: 2px;
        }
        .message_time{
          color: #999999;
          font-size: 14px;
          margin-left: 20px;
        }
      }
      .message_content{
        color: #666666;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
</style>

